<template>
	<view class="container">
		<!-- Loading状态 -->
		<view class="loading-state" v-if="loading">
			<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else-if="notifications.length === 0">
			<image src="/static/images/empty-notification.png" mode="aspectFit" class="empty-image"></image>
			<text class="empty-text">暂无系统通知</text>
		</view>
		
		<!-- 通知列表 -->
		<view class="notification-list" v-else>
			<view 
				class="notification-item"
				v-for="notification in notifications"
				:key="notification.id"
				@tap="showDetail(notification)"
			>
				<view class="notification-header">
					<view class="notification-status">
						<text class="status-dot" :class="{ 'unread': !notification.is_read }"></text>
						<text class="status-text">{{ notification.is_read ? '已读' : '未读' }}</text>
					</view>
					<text class="notification-time">{{ formatTime(notification.create_time) }}</text>
				</view>
				<view class="notification-content">
					<text class="content-text">{{ notification.content }}</text>
				</view>
			</view>
		</view>
		
		<!-- 详情弹窗 -->
		<uni-popup ref="detailPopup" type="center">
			<view class="detail-popup">
				<view class="popup-header">
					<text class="popup-title">通知详情</text>
					<text class="close-btn" @tap="closeDetail">×</text>
				</view>
				<scroll-view scroll-y class="popup-content">
					<view class="detail-time">
						{{ formatTime(currentNotification?.create_time) }}
					</view>
					<view class="detail-content">
						{{ currentNotification?.content }}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '@/utils/request'

const notifications = ref([])
const currentNotification = ref(null)
const detailPopup = ref(null)
const loading = ref(true)
const loadingText = {
	contentdown: '上拉显示更多',
	contentrefresh: '正在加载...',
	contentnomore: '没有更多数据了'
}

// 获取系统通知列表
const getNotifications = async () => {
	try {
		loading.value = true
		const response = await api.request({
			url: '/api/system/get_system_notification/',
			method: 'GET',
            data: {}
		})
		
		if(response.code === 200) {
			// 按未读状态和时间排序
			notifications.value = response.data.sort((a, b) => {
				// 首先按未读状态排序（未读在前）
				if (a.is_read !== b.is_read) {
					return a.is_read ? 1 : -1
				}
				// 如果未读状态相同，则按时间倒序排序（新的在前）
				return new Date(b.create_time) - new Date(a.create_time)
			})
		} else {
			throw new Error(response.message)
		}
	} catch(error) {
		console.error('获取通知失败:', error)
		uni.showToast({
			title: '获取通知失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 显示通知详情
const showDetail = async (notification) => {
	try {
		const response = await api.request({
			url: '/api/system/get_system_notification_detail/',
			method: 'GET',
			data: {
				system_notification_id: notification.id
			}
		})
		
		if(response.code === 200) {
			currentNotification.value = response.data
			detailPopup.value.open()
		} else {
			throw new Error(response.message)
		}
	} catch(error) {
		console.error('获取详情失败:', error)
		uni.showToast({
			title: '获取详情失败',
			icon: 'none'
		})
	}
}

// 关闭详情弹窗
const closeDetail = () => {
	detailPopup.value.close()
	currentNotification.value = null
}

// 格式化时间
const formatTime = (timeStr) => {
	if(!timeStr) return ''
	const date = new Date(timeStr.replace(/-/g, '/'))
	return date.toLocaleString('zh-CN', {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		hour: '2-digit',
		minute: '2-digit'
	})
}

onMounted(() => {
	getNotifications()
})
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	min-height: 100vh;
	background: #f8f9fa;
}

.loading-state {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx 0;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	
	.empty-image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		color: #999;
		font-size: 28rpx;
	}
}

.notification-list {
	.notification-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
		
		.notification-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.notification-status {
				display: flex;
				align-items: center;
				
				.status-dot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background: #52c41a;
					margin-right: 10rpx;
					
					&.unread {
						background: #fa8c16;
					}
				}
				
				.status-text {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.notification-time {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.notification-content {
			.content-text {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				
				// 超过3行显示省略号
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		}
		
		&:active {
			opacity: 0.8;
		}
	}
}

.detail-popup {
	width: 600rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #ebeef5;
		
		.popup-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
		
		.close-btn {
			font-size: 40rpx;
			color: #999;
			padding: 10rpx;
		}
	}
	
	.popup-content {
		max-height: 800rpx;
		padding: 30rpx;
		
		.detail-time {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 20rpx;
		}
		
		.detail-content {
			font-size: 28rpx;
			color: #333;
			line-height: 1.6;
			white-space: pre-wrap;
			word-break: break-word;
		}
	}
}
</style>
